<template>
    <div class="page-evaluation">
        <div class="main">
            <CommentItem v-for="(comment, index) in list"
                @toImages="toImages(comment)"
                :key="index"
                :avatar="comment.avatar"
                :name="comment.nickname"
                :rate="comment.score"
                :content="comment.content"
                :date="comment.created_at"
                :showMore="true"
                :images="comment.image"
                :huifus="comment.child.content?comment.child.content:comment.system_reply?comment.system_reply:''" />
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import { api } from '@/lib/api';
import CommentItem from '@/features/comment/commentItem.vue';
import { Component, Vue } from 'vue-property-decorator';
import { EMPTY_LIST, ROUTE_NAME } from '@/lib/constant';

@Component({
    name: 'EvaluationList',
    components: {
        CommentItem,
    },
})
export default class EvaluationList extends Vue {
    // 商品类型
    public get type() {
        return this.$route.params.type;
    }

    /** 套系id */
    public get goodId() {
        return this.$route.params.goodId;
    }

    /** 评价列表 */
    public get pkgCommentsMap() {
        return store.state.pkg.comments;
    }

    /** 评价 */
    public get goodCommentsMap() {
        return store.state.good.comments;
    }

    /** 评价列表 */
    public get comments() {
        if (this.type === 'good') {
            return this.goodCommentsMap[Number(this.goodId)] || EMPTY_LIST;
        } else if (this.type === 'pkg') {
            return this.pkgCommentsMap[Number(this.goodId)] || EMPTY_LIST;
        } else {
            return EMPTY_LIST;
        }
    }

    /** 评价列表 */
    public get list() {
        return this.comments.list;
    }

    public async getDate() {
        if (this.type === 'pkg') {
            await store.dispatch('pkg/getComments', {
                pkgId: this.goodId,
                offset: this.list.length,
                count: 10,
            });
        } else {
            await store.dispatch('good/getComments', {
                productId: this.goodId,
                offset: this.list.length,
                count: 10,
            });
        }
    }

    public toImages(comment: Pkg.Comment | Product.Comment) {
        api.push({
            name: ROUTE_NAME.BRIDAL_IMAGES,
            query: {
                comment: JSON.stringify(comment),
            },
        });
    }
    public async onReachBottom() {
        this.getDate();
    }

    // 下拉刷新
    public async onPullDownRefresh() {
        if (this.type === 'pkg') {
            await store.dispatch('pkg/getComments', {
                pkgId: this.goodId,
                offset: 0,
                count: 10,
            });
        } else {
            await store.dispatch('good/getComments', {
                productId: this.goodId,
                offset: 0,
                count: 10,
            });
        }
    }


    public async created() {
        if (this.type === 'pkg') {
            await store.dispatch('pkg/getComments', {
                pkgId: this.goodId,
                offset: 0,
                count: 10,
            });
        } else {
            await store.dispatch('good/getComments', {
                productId: this.goodId,
                offset: 0,
                count: 10,
            });
        }
        
        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>
<style lang="less">

@import "../../lib/style/mixins.less";
.page-evaluation {
    min-height: 100%;
    background-color: @primary-color;
    .main {
        padding: 10px;
    }
}

</style>
